<template>
  <div class="about">
    <div>
       <ul>
          <li v-for="item in list[0].imageList"><img :src="item"></li>
        </ul>
    </div>
       
      <div>
        <h5>游戏简介：</h5>
        {{list[0].guide}}
      </div>
  </div> 
</template>

<script>
import axios from 'axios'
export default {
  name: 'about',
  data () {
    return {
      list:[
          {"imageList":["http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160518171058_451.png!g336","http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160518171058_705.png!g336","http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160518171058_721.png!g336","http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160518171058_209.png!g336"],"guide":"《乱戳三国》一款由热游网络科技开发的热血三国题材手机网页游戏。群将约架，一统三国。 《乱戳三国》的战斗不同于其他的放置类的战斗，它的战斗方式更加的有趣，玩家可招募武将布阵、可使用计谋影响战局、可挑战魔王塔获得极品装备。正如《乱戳三国》这个名字，群将乱舞，热血群P，及华丽技能的特效。"}
     ]
      
    }
  },   
  mounted(){
      
   
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .about,div{
    width: 100%;
   background: #fff;
  }
  div{
  overflow: auto;
}
  ul{
    width: 128%;
  }
  ul{
    display: flex;
  }
  li{
    width: 32%;
    padding: 0.05rem;
    box-sizing: border-box;
  }
  img{
    width: 100%;
    height: 2rem;
  }
</style>
